<template>
  <div>
    <h1>App</h1>

    <n-button @click="fn1">基础语法</n-button>

    <n-input v-model:value="inputValue" />
    <n-button @click="fn2">新增一项 Todo</n-button>

    <n-button @click="fn3">删除一项 id=2</n-button>

    <n-button @click="fn4">用 instance 发请求</n-button>
  </div>
</template>

<script>
// 引入 axios
import axios from "axios";

// 创建一个 axios 实例
const instance = axios.create({
  // 设置上一些默认值，后续的请求就不需要再传递这些值了
  baseURL: "http://localhost:3000",
});

// 可以直接对 axios 处理，也可以对 instance 处理
// 请求拦截，可以在请求发送出去之前，对请求做一些额外的处理
instance.interceptors.request.use(
  /**
   * 只要通过 instance 发送的请求，都会先经过这里
   * config 请求配置对象
   * 返回值：config 请求配置对象
   */
  (config) => {
    // NOTE: 在此处，对 config 做一些额外的处理，比如设置一个请求头 x-host
    // ...
    // ...
    console.log("请求拦截", config);
    config.headers["x-host"] = "abcd";

    return config;
  },
  /**
   * 请求失败，会进入的函数
   * error 请求失败的错误信息
   */
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截，可以在响应到达之前，对响应做一些额外的处理
instance.interceptors.response.use(
  (response) => {
    // NOTE:
    console.log("响应拦截", response);

    // 这里返回的内容，就是后续 then 中的函数的参数
    // 基于这点，我们一般这里会直接返回 response.data , 后续就不需要再写 response.data 了
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    fn1() {
      // 1. 基础语法 axios(config)
      // axios({
      //   url: "http://localhost:3000/todos", // 请求地址
      //   method: "get", // 请求方式
      // }).then((response) => {
      //   // response 是一个Response包装对象，里面的 data 属性才是真正的接口响应数据
      //   console.log(response.data);
      // });
      // 2. axios(url, config)
      axios("http://localhost:3000/todos").then((response) => {
        console.log(response.data);
      });
    },

    fn2() {
      // 调用接口，将输入框的值新增到后台
      // 1. axios(url, config)
      // axios("http://localhost:3000/todos", {
      //   method: "post",
      //   // 请求体
      //   data: {
      //     title: this.inputValue,
      //     completed: false,
      //   },
      // }).then((response) => {
      //   console.log(response.data);
      // });
      // 2. axios.post(url, data, config)
      axios
        .post("http://localhost:3000/todos", {
          title: this.inputValue,
          completed: false,
        })
        .then((response) => {
          console.log(response.data);
        });
    },

    fn3() {
      // 删除
      // 1. axios(url, config)
      // axios("http://localhost:3000/todos/2", {
      //   method: "delete",
      // }).then((response) => {
      //   console.log(response.data);
      // });
      // 2. axios.delete(url, config)
      axios.delete("http://localhost:3000/todos/1").then((response) => {
        console.log(response.data);
      });
    },

    fn4() {
      // 1. 创建出来的 instance 实例，使用语法和 直接使用 axios 一样
      //    请求url地址，没有已协议开头，那么会拼接上 instance 的 baseURL http://localhost:3000/todos
      instance("/todos").then((response) => {
        console.log("then response", response);
        // console.log(response);
      });
    },
  },
};
</script>
